<div class="ui-g-12 p-20">
    <p-panel headerClass="bg-none" [showScroll]="true">
        <p-header>
            <div class="text-right p-6-0">
                <span class="border-l-1a8fe8 p-l-8 pull-left m-t-8">{{title}}</span>
                <button pButton type="button" (click)="save()" class="btn btn-success" label="保存"></button>
                <button pButton type="button" (click)="returnBtn()" label="取消" class="btn btn-secondary"></button>
            </div>
        </p-header>

        <form #form="ngForm" novalidate class="form-horizontal" style="height: 600px">
            <div class="table-row">
                <div class="table-cell text-right p-l-25 p-required">
                    名称：
                </div>
                <div class="table-cell">
                    <input pInputText class="p-input" required maxlength="25" (blur)="checkNameUnique(template.name);" (focus)="nameError =''"
                        name="labourCompany" required [(ngModel)]="template.name" placeholder="请输入名称" [ngClass]="nameError?'p-input-error':''">

                </div>
                <div></div>
                <div class="table-cell">
                    <p-message *ngIf="nameError" severity="error" [text]="nameError"></p-message>
                </div>
            </div>
            <div class="table-row">
                <div class="table-cell text-right p-l-25 p-required">
                    标准施工周期：
                </div>
                <div class="table-cell icon-text " data-text="天">
                    <p-spinner name="constructionLimitDays" size="30" styleClass="p-spinner" [(ngModel)]="template.constructionLimitDays" [step]="1"
                        (onFocus)="focuLimitDays()" [min]="1" [max]="99999" maxlength="6" placeholder="请输入标准施工周期" (onBlur)="checkLimitDays(template.constructionLimitDays);"></p-spinner>
                </div>
                <div></div>
                <div class="table-cell">
                    <p-message *ngIf="constructionLimitDaysError" severity="error" [text]="constructionLimitDaysError"></p-message>
                </div>
            </div>
            <div class="table-row">
                <div class="table-cell text-right p-l-25 p-required">
                    施工周期范围：
                </div>
                <div class="table-cell icon-text" data-text="天">
                    <p-spinner name="constructionLimitDaysFrom" size="30" styleClass="p-spinner" [(ngModel)]="template.constructionLimitDaysFrom"
                        (onFocus)="constructionLimitError=''" [step]="1" [min]="1" [max]="99999" maxlength="6" placeholder="请输入施工周期范围"
                        (onBlur)="checkDaysFrom(template.constructionLimitDaysFrom);"></p-spinner>
                </div>
                &nbsp;~&nbsp;
                <div class="table-cell icon-text" data-text="天">
                    <p-spinner name="constructionLimitDaysTo" size="30" styleClass="p-spinner" [(ngModel)]="template.constructionLimitDaysTo"
                        (onFocus)="constructionLimitError=''" [step]="1" [min]="1" [max]="99999" maxlength="6" placeholder="请输入施工周期范围"
                        (onBlur)="checkDaysTo(template.constructionLimitDaysTo);"></p-spinner>
                </div>
                <div></div>
                <div class="table-cell">
                    <p-message *ngIf="constructionLimitError" severity="error" [text]="constructionLimitError"></p-message>
                </div>
            </div>
            <div class="table-row">
                <div class="table-cell text-right p-l-25 p-required">
                    适用面积：
                </div>
                <div class="table-cell icon-text" data-text="㎡">
                    <p-spinner name="useAbleAreaFrom" size="30" styleClass="p-spinner" [min]="1" [max]="99999" maxlength="6" [(ngModel)]="template.useAbleAreaFrom"
                        [step]="1" (onBlur)="checkAbleArea(template.useAbleAreaFrom);" placeholder="请输入适用面积" (onFocus)="useAbleAreaError=''"></p-spinner>
                </div>
                &nbsp;~&nbsp;
                <div class="table-cell icon-text" data-text="㎡">
                    <p-spinner name="useAbleAreaTo" size="30" styleClass="p-spinner" [min]="1" [max]="99999" maxlength="6" [(ngModel)]="template.useAbleAreaTo"
                        [step]="1" (onBlur)="checkAbleAreaTo(template.useAbleAreaTo);" placeholder="请输入适用面积" (onFocus)="useAbleAreaError=''"></p-spinner>
                </div>
                <div></div>
                <div class="table-cell">
                    <p-message *ngIf="useAbleAreaError" severity="error" [text]="useAbleAreaError"></p-message>
                </div>
            </div>
            <div></div>
            <!-- <div class="table-row">
                <div class="table-cell text-right p-l-25 p-required">
                    适用面积:
                </div>
                <div class="table-cell">
                    <input pInputText type="text" name="useAbleAreaFrom" required class="p-input" [(ngModel)]="template.useAbleAreaFrom">
                </div>
                <div class="table-cell">
                    <span class="p-l-16">㎡</span>
                </div>
                &nbsp;~&nbsp;
                <div class="table-cell">
                    <input pInputText type="text" name="useAbleAreaTo" required class="p-input" [(ngModel)]="template.useAbleAreaTo">
                </div>
                <div class="table-cell">
                    <span class="p-l-16">㎡</span>
                    <p-message *ngIf="useAbleAreaError" severity="error" [text]="useAbleAreaError"></p-message>
                </div>
            </div> -->
            <div class="table-row">
                <div class="table-cell text-right p-l-25 p-required">
                    适用报价模板：
                </div>
                <div class="table-cell">
                    <button pButton type="button" (click)="onClickPrice()" label="选择" class="btn btn-success"></button>
                </div>
                <div class="table-cell">
                    <p-message *ngIf="priceTemplateError" severity="error" [text]="priceTemplateError"></p-message>
                </div>
                <div></div>
            </div>
            <div></div>
            <div class="table-row" *ngIf="tempData.length>=1">
                <div class="table-cell text-right p-l-25 ">
                </div>
                <div class="table-cell">
                    <div class=" ui-g" style="margin-left:-5px;">
                        <div class=" ui-g">
                            <div class="ui-g-2" *ngFor="let col of tempData" style="width:130px">
                                <p-label [label]='col.name' (onClose)="onRemove(col)"></p-label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div></div>


            <div class="table-row">
                <div class="table-cell text-right p-l-25 p-required">
                    适用组织：
                </div>
                <div class="table-cell">
                    <button pButton type="button" (click)="selectOrganization();" label="选择" class="btn btn-success"></button>
                    <p-message *ngIf="organizationError" severity="error" [text]="organizationError"></p-message>
                </div>
            </div>

            <div class="table-row"  *ngIf="organizationOperationtData.length>=1">
                <div class="table-cell text-right p-l-25">
                </div>
                <div class="ui-g">
                    <div *ngFor="let organizationList of organizationOperationtData;" class="p-15 ">
                        <p-label [label]='organizationList.name' [showClose]="true" (onClose)="removeOrganization(organizationList)"></p-label>
                    </div>
                </div>
            </div>
            <!--选择组织弹窗-->
            <p-dialog header="选择组织" (onHide)="selectedOrganizationTree=[]" [(visible)]="organizationDialog" modal="modal" width="700" [responsive]="true">
                <div class="text-center">
                    <p-tree [value]="organizationTree" selectionMode="checkbox" childrenAll="true" [(selection)]="selectedOrganizationTree" styleClass='materialTree'>
                    </p-tree>
                    <div class="inline-block">
                        <div class="table-row">
                            <div class="table-cell text-right p-l-25"></div>
                            <div class="table-cell text-left">
                                <button pButton type="button" (click)="saveSelectedOrganization()" [label]="'保存'" class="btn btn-success m-btn-dialog"></button>
                            </div>
                        </div>
                    </div>
                </div>
            </p-dialog>
            <!--选择组织弹窗end-->
            <div class="table-row">
                <div class="table-cell text-right p-l-25 p-required">
                    交款模板：
                </div>
                <div class="table-cell">
                    <p-dropdown required name="payTemplate" [options]="payTemplate" styleClass="width-220"  placeholder="请选择交款模板"
                        [(ngModel)]="selectedPayTemplate" (onChange)="payTemplateCk()" optionLabel="name" dataKey="code"></p-dropdown>

                </div>
                <div class="table-cell">
                    <p-message *ngIf="payTemplateError" severity="error" [text]="payTemplateError"></p-message>
                </div>
            </div>
            <div></div>
            <div class="table-row">
                <div class="table-cell text-right p-l-25 p-required">
                    送货批次：
                </div>
                <div class="table-cell icon-text" data-text="批">
                    <p-spinner name="deliveryBatchNo"  size="30" styleClass="p-spinner" [(ngModel)]="template.deliveryBatchNo" (onFocus)="deliveryBatchNoError=''"
                        [step]="1" [min]="1" [max]="20" maxlength="2" (onBlur)="checkBatchNo(template.deliveryBatchNo);" placeholder="请输入送货批次"></p-spinner>
                </div>
                <div class="table-cell">
                    <p-message *ngIf="deliveryBatchNoError" severity="error" [text]="deliveryBatchNoError"></p-message>
                </div>
            </div>
        </form>
    </p-panel>

    <p-dialog header="选择报价模板" [(visible)]="W001" modal="modal" width="800" [responsive]="true">
        <div>
            <p-pickList [source]="filesTree" [target]="targetCars" [showSourceControls]="false" [showTargetControls]="false"
                sourceHeader="备选值"targetHeader="已选中" filterBy="name" [responsive]="true"  dragdrop="true" dragdropScope="cars" sourceFilterPlaceholder="请输入备选关键词"
                targetFilterPlaceholder="请输入选中关键词" [sourceStyle]="{'height':'300px'}" [targetStyle]="{'height':'300px'}">
                <ng-template let-car pTemplate="item">
                    <div class="ui-helper-clearfix">
                        <div  class="ellipsis-td-2" style="font-size:14px;padding:5px 10px" title='{{car.name}}'>{{car.name}}</div>
                    </div>
                </ng-template>
            </p-pickList>
        </div>
        <div class="text-center">
            <button pButton type="button" [label]="'保存'" (click)="saveTement()" class="btn btn-success m-btn-dialog"></button>
        </div>


    </p-dialog>

</div>